import React from "react";
import ProForm, { ProFormText } from "@ant-design/pro-form";
import MusicAPI from '@/services/ant-design-pro/music';
import { Modal, message } from 'antd'
const { addSongList } = MusicAPI
const Create = (props) => {
    const { isModalVisible, isShowModal, setData, initData } = props;
    const type = initData === undefined ? "添加" : "编辑";

    /**
     * 添加
     * @param {obj} params 参数
     * @returns 
     */
    const handleSubmit = async (params) => {
        let result;
        if (initData === undefined) { // 添加
            result = await addSongList(params);
        }

        if (result.status == 'ok') {
            await setData();
            message.success(type + "成功");
        } else {
            message.error(type + '失败：' + result.data.message);
            console.log(result.data.error);
        }
        isShowModal(false);
    }

    return (
        <Modal
            width="600px"
            title={`${type}歌单`}
            footer={false}
            visible={isModalVisible}
            onCancel={() => isShowModal(false)}
            destroyOnClose={true}>
            {
                <ProForm
                    onFinish={(values) => handleSubmit(values)}
                    initialValues={initData}
                >
                    <ProFormText
                        name="list_name"
                        label="歌单名称"
                        placeholder="请输入名称"
                        rules={[
                            { required: true, message: "请输入名称" }
                        ]}
                    />

                </ProForm>
            }
        </Modal>
    );
}

export default Create;